<template>
    <div class="fullscreen" id="fullscreen" ref="fullscreen">
        <div class="title" :class="{ big: status == 1 }">
            <p>{{ details.taskName }}</p>
            <!-- <img
                src="./../../../assets/images/Screen.png"
                class="btn"
                @click="fullScreen()"
                v-show="bigscreen"
                alt="全屏"
            />
            <img
                src="./../../../assets/images/outScreen.png"
                class="btn"
                @click="exitFullscreen()"
                v-show="!bigscreen"
                alt="退出全屏"
            /> -->
        </div>
        <div class="content" :class="{ big: status == 1 }">
            <div class="cont_left" :class="{ big: status == 1 }">
                <div class="box_one">
                    <p>
                        <img
                            src="./../../../assets/images/nucle_tit.png"
                            alt=""
                        />上门检测信息
                        <img
                            src="./../../../assets/images/nucle_line.png"
                            alt=""
                        />
                    </p>
                    <div class="interval">
                        <basicChart :chartOption="chartOptionBar" />
                    </div>
                </div>
                <div class="box_two">
                    <p>
                        <img
                            src="./../../../assets/images/nucle_tit.png"
                            alt=""
                        />检测人群画像
                        <img
                            src="./../../../assets/images/nucle_line.png"
                            alt=""
                        />
                    </p>
                    <div class="interval">
                        <basicChart :chartOption="chatStackbar" />
                    </div>
                </div>
                <div class="box_two">
                    <p>
                        <img
                            src="./../../../assets/images/nucle_tit.png"
                            alt=""
                        />采集人数变化
                        <img
                            src="./../../../assets/images/nucle_line.png"
                            alt=""
                        />
                    </p>
                    <div class="interval">
                        <div class="timeline">
                            <p
                                @click="getqueryCollectTimeInfo(0)"
                                :class="{ active: tab === 0 }"
                            >
                                15分钟
                            </p>
                            <p
                                @click="getqueryCollectTimeInfo(1)"
                                :class="{ active: tab === 1 }"
                            >
                                1小时
                            </p>
                            <span
                                class="border-btm l-btm"
                                :class="{
                                    'l-btm': tab === 0,
                                    'c-btm': tab === 1
                                }"
                            ></span>
                        </div>
                        <basicChart :chartOption="brokenline" />
                    </div>
                </div>
            </div>
            <div class="cont_center" :class="{ big: status == 1 }">
                <div class="number">
                    <li>
                        <p>{{ details.collectNum }} <small>人</small></p>
                        <span>已采集人数</span>
                        <div class="dynamic">
                            <span>
                                <img
                                    v-show="changeCollectNum == 0"
                                    src="./../../../assets/images/nucle_equal.png"
                                    alt=""
                                /><img
                                    v-show="changeCollectNum > 0"
                                    src="./../../../assets/images/nucle_up.png"
                                    alt=""
                                />
                                <img
                                    v-show="changeCollectNum < 0"
                                    src="./../../../assets/images/nucle_down.png"
                                    alt=""
                                />
                                {{ Math.abs(changeCollectNum) }}</span
                            >
                            <span>过去1分钟</span>
                        </div>
                    </li>
                    <li>
                        <p>{{ details.remainNum }} <small>人</small></p>
                        <span>待采集人数</span>
                        <div class="dynamic">
                            <span>
                                <img
                                    v-show="changeRemainNum == 0"
                                    src="./../../../assets/images/nucle_equal.png"
                                    alt=""
                                /><img
                                    v-show="changeRemainNum > 0"
                                    src="./../../../assets/images/nucle_up.png"
                                    alt=""
                                />
                                <img
                                    v-show="changeRemainNum < 0"
                                    src="./../../../assets/images/nucle_down.png"
                                    alt=""
                                />
                                {{ Math.abs(changeRemainNum) }}</span
                            >
                            <span>过去1分钟</span>
                        </div>
                    </li>
                    <li>
                        <p>{{ details.collectSpeed }}<small>人/分</small></p>
                        <span>当前采集速度</span>
                        <div class="dynamic">
                            <span>
                                <img
                                    v-show="changeCollectSpeed == 0"
                                    src="./../../../assets/images/nucle_equal.png"
                                    alt=""
                                /><img
                                    v-show="changeCollectSpeed > 0"
                                    src="./../../../assets/images/nucle_up.png"
                                    alt=""
                                />
                                <img
                                    v-show="changeCollectSpeed < 0"
                                    src="./../../../assets/images/nucle_down.png"
                                    alt=""
                                />
                                {{ Math.abs(changeCollectSpeed) }}</span
                            >
                            <span>过去1分钟</span>
                        </div>
                    </li>
                    <li>
                        <p>
                            {{ details.workChannelNum }}（{{
                                details.freeChannelNum
                            }}）<small>个</small>
                        </p>
                        <span>工作通道数量</span>
                        <div class="dynamic">
                            <span
                                ><img
                                    v-show="changeFreeChannelNum == 0"
                                    src="./../../../assets/images/nucle_equal.png"
                                    alt=""
                                /><img
                                    v-show="changeFreeChannelNum > 0"
                                    src="./../../../assets/images/nucle_up.png"
                                    alt=""
                                />
                                <img
                                    v-show="changeFreeChannelNum < 0"
                                    src="./../../../assets/images/nucle_down.png"
                                    alt=""
                                />
                                {{ Math.abs(changeFreeChannelNum) }}</span
                            >
                            <span>上次变化</span>
                        </div>
                    </li>
                    <li>
                        <p>{{ workTime }}<small></small></p>
                        <span>预计完成时间</span>
                        <div class="time">{{ remainingtime }}</div>
                    </li>
                </div>
                <div class="rotation">
                    <lightbox :realist="realist"></lightbox>
                </div>
                <div class="map">
                    <Map :speedlist="speedlist" :taskId="taskId"></Map>
                </div>
            </div>
            <div class="cont_right" :class="{ big: status == 1 }">
                <div class="box_three">
                    <p>
                        <img
                            src="./../../../assets/images/nucle_tit.png"
                            alt=""
                        />预计完成顺序
                        <img
                            src="./../../../assets/images/nucle_line.png"
                            alt=""
                        />
                    </p>
                    <div class="interval">
                        <squareLightbox
                            :header="headerOrder"
                            :planlist="planlist"
                        ></squareLightbox>
                    </div>
                </div>
                <div class="box_three">
                    <p>
                        <img
                            src="./../../../assets/images/nucle_tit.png"
                            alt=""
                        />检测人数排名
                        <img
                            src="./../../../assets/images/nucle_line.png"
                            alt=""
                        />
                    </p>
                    <div class="interval">
                        <squareLightbox
                            :header="headerRank"
                            :speedlist="speedlist"
                        ></squareLightbox>
                    </div>
                </div>
            </div>
        </div>
        <Modal
            v-model="win_status"
            title="任务通知"
            :styles="{ top: '50%' }"
            @on-ok="close"
        >
            <p>当前采集任务结束，是否关闭当前窗口</p>
        </Modal>
    </div>
</template>
<script>
import api from '@/api/commonApi';
import { getBeforeDate } from '@/commons/function.js';
import basicChart from '@/components/echarts/basicChart';
import lightbox from '@/components/echarts/lightbox';
import squareLightbox from '@/components/echarts/squareLightbox';
import Map from '@/components/echarts/nucleMap';
export default {
    components: {
        basicChart,
        Map,
        lightbox,
        squareLightbox
    },
    data() {
        return {
            workTime: null,
            collect_change: 0,
            remain_change: 0,
            speed_change: 0,
            work_change: 0,
            tab: 0,
            details: {},
            headerOrder: ['采集点', '待采集人数', '预计完成时间'],
            headerRank: ['采集点', '已采集人数', '检测速度'],
            taskId: '',
            status: 0,
            chartOptionBar: {},
            chatStackbar: {},
            brokenline: {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(22,62,166,0.9)'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: true,
                        color: '#15223B'
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#fffff',
                        formatter: function (value) {
                            var ret = '';
                            var maxLength = 6;
                            var valLength = value.length;
                            var rowN = Math.ceil(valLength / maxLength);
                            if (rowN > 1) {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = '';
                                    var start = i * maxLength;
                                    var end = start + maxLength;
                                    temp = value.substring(start, end) + '\n';
                                    ret += temp;
                                }
                                return ret;
                            } else {
                                return value;
                            }
                        }
                    },
                    data: []
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    splitLine: {
                        show: true,
                        color: '#15223B'
                    }
                },
                dataZoom: [
                    // 滑动条
                    {
                        xAxisIndex: 0, // 这里是从X轴的0刻度开始
                        show: false, // 是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 8 // 一次性展示6个。
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'line',
                        lineStyle: {
                            color: '#2B8BFF',
                            width: 2
                        },
                        itemStyle: {
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#6BC2FF' // 中心颜色
                                    },
                                    {
                                        offset: 0.4,
                                        color: '#6BC2FF'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#6BC2FF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#6BC2FF'
                                    }
                                ]
                            },
                            borderColor: '#6BC2FF',
                            borderWidth: 2
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    }
                ]
            },
            alwaysNum: 0,
            mainNum: 0,
            signingNum: 0,
            signingRatio: 0,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: [
                '星期日',
                '星期一',
                '星期二',
                '星期三',
                '星期四',
                '星期五',
                '星期六'
            ],
            realist: [],
            speedlist: [],
            planlist: [],
            bigscreen: true,
            finTime: null,
            remainingtime: null,
            intervalId: null,
            finTimeFn: null,
            win_status: false,
            oldCollectNum: null,
            oldRemainNum: null,
            oldCollectSpeed: null,
            oldFreeChannelNum: null,
            changeCollectNum: 0,
            changeCollectSpeed: 0,
            changeFreeChannelNum: 0,
            changeRemainNum: 0
        };
    },
    created() {
        if (this.$route.query.id) {
            this.taskId = this.$route.query.id;
        }
        this.dataRefreh();
        this.timefn();
        this.getqueryCollectSexInfo();
        this.getqueryCollectInfo();
        this.getqueryCollectTimeInfo(0);
        this.getqueryCollectTitleInfo();
        this.getqueryCollectSpeedInfone();
        this.getqueryCollectSpeedInfotwo();
        // if (this.$route.name === "nucleAcidmonitor") {
        //     this.status = 1;
        // }
    },
    mounted() {},
    destroyed() {
        this.clear();
        this.finclear();
    },
    methods: {
        close() {
            this.win_status = true;
            window.close();
        },
        // 倒计时
        timefn() {
            if (this.finTimeFn != null) {
                return;
            }
            this.finTimeFn = setInterval(() => {
                this.myFunction();
            }, 1000);
        },
        // 定时刷新数据函数
        dataRefreh() {
            // 计时器正在进行中，退出函数
            if (this.intervalId != null) {
                return;
            }
            // 计时器为空，操作
            this.intervalId = setInterval(() => {
                this.getqueryCollectSexInfo();
                this.getqueryCollectInfo();
                this.getqueryCollectTimeInfo(0);
                this.getqueryCollectTitleInfo();
                this.getqueryCollectSpeedInfone();
                this.getqueryCollectSpeedInfotwo();
            }, 60000);
        },
        // 停止定时器
        clear() {
            clearInterval(this.intervalId); // 清除计时器
            this.intervalId = null; // 设置为null
        },
        finclear() {
            clearInterval(this.finTimeFn); // 清除计时器
            this.finTimeFn = null; // 设置为null
        },
        closewindow() {
            window.close();
        },
        fullScreen() {
            // 全屏
            this.bigscreen = false;
            var full = document.getElementById('fullscreen');
            this.launchIntoFullscreen(full);
        },
        // 全屏封装
        launchIntoFullscreen(full) {
            if (full.requestFullscreen) {
                full.requestFullscreen();
            } else if (full.mozRequestFullScreen) {
                full.mozRequestFullScreen();
            } else if (full.webkitRequestFullscreen) {
                full.webkitRequestFullscreen();
            } else if (full.msRequestFullscreen) {
                full.msRequestFullscreen();
            }
        },
        // 退出全屏
        exitFullscreen() {
            this.bigscreen = true;
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        },
        getqueryCollectInfo() {
            /**
             * 上门检测信息
             */
            this.$axios
                .post(api.queryCollectInfo, {
                    taskId: this.taskId
                })
                .then((res) => {
                    if (res.data.code === 1) {
                        this.chartOptionBar = {
                            color: ['#0054FF', '#00BAFF'],
                            tooltip: {
                                trigger: 'item',
                                show: true,
                                backgroundColor: 'rgba(22,62,166,0.9)'
                            },
                            legend: {
                                orient: 'vertical',
                                right: '30px',
                                bottom: '100px',
                                icon: 'circle',
                                itemWidth: 14,
                                itemGap: 12,
                                textStyle: {
                                    color: '#fff',
                                    rich: {
                                        a: {
                                            color: '#fff',
                                            fontSize: 12,
                                            padding: [0, 10, 0, 0]
                                        },
                                        b: {
                                            color: '#fff',
                                            fontSize: 12,
                                            padding: [0, 10, 0, 10]
                                        }
                                    }
                                },
                                formatter(name) {
                                    var target, unit;
                                    let datav = res.data.object;
                                    for (
                                        var i = 0, l = datav.length;
                                        i < l;
                                        i++
                                    ) {
                                        if (datav[i].name === name) {
                                            target = datav[i].value;
                                            unit = '人';
                                        }
                                    }
                                    return `{a| ${name}}{b|${target}}{a|${unit}}`;
                                }
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: ['15%', '50%'],
                                    center: ['28%', '50%'],
                                    avoidLabelOverlap: false,
                                    formatter: '{text|{b}}\n{num|{c}}',
                                    label: {
                                        show: false,
                                        position: 'outside'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: res.data.object
                                }
                            ]
                        };
                    }
                })
                .catch(() => {});
        },
        getqueryCollectSexInfo() {
            /**
             * 检测人群画像
             */
            this.$axios
                .post(api.queryCollectSexInfo, { taskId: this.taskId })
                .then((res) => {
                    if (res.data.code === 1) {
                        let that = this;
                        setTimeout(() => {
                            that.chatStackbar = {
                                color: ['#02D9EB', '#EB029C'],
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    show: true,
                                    backgroundColor: 'rgba(22,62,166,0.9)'
                                },
                                legend: {
                                    data: ['男', '女'],
                                    left: '3%',
                                    top: '4%',
                                    icon: 'circle',
                                    textStyle: {
                                        color: 'rgba(195, 240, 255, 1)',
                                        fontSize: 12
                                    }
                                },
                                xAxis: [
                                    {
                                        data: res.data.object.xData,
                                        splitLine: {
                                            show: true,
                                            color: '#15223B'
                                        },
                                        axisLabel: {
                                            margin: 5,
                                            color: '#FFFFFF',
                                            textStyle: {
                                                fontSize: 12
                                            }
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#15223B'
                                            }
                                        },
                                        axisTick: {
                                            show: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        axisLabel: {
                                            color: '#FFFFFF',
                                            textStyle: {
                                                fontSize: 12
                                            }
                                        },
                                        axisLine: {
                                            show: false
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        splitLine: {
                                            show: true,
                                            color: '#15223B'
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '男',
                                        type: 'bar',
                                        data: res.data.object.man,
                                        barWidth: 8,
                                        itemStyle: {
                                            normal: {
                                                barBorderRadius: [5, 5, 0, 0]
                                            }
                                        }
                                    },
                                    {
                                        name: '女',
                                        type: 'bar',
                                        data: res.data.object.woMan,
                                        barWidth: 8,
                                        itemStyle: {
                                            normal: {
                                                barBorderRadius: [5, 5, 0, 0]
                                            }
                                        }
                                    }
                                ]
                            };
                        }, 800);
                    }
                })
                .catch(() => {});
        },
        getqueryCollectTimeInfo(val) {
            /**
             * 采集人数变化 15分钟：0 1小时：1
             */
            this.tab = val;
            this.$axios
                .post(api.queryCollectTimeInfo, {
                    taskId: this.taskId,
                    type: val
                })
                .then((res) => {
                    if (res.data.code === 1) {
                        this.brokenline.xAxis.data = res.data.object.xList;
                        this.brokenline.series[0].data =
                            res.data.object.dataList;
                    }
                })
                .catch(() => {});
        },
        getqueryCollectSpeedInfone() {
            /**
             * 预计完成顺序
             */
            this.$axios
                .post(api.queryCollectSpeedInfo, {
                    taskId: this.taskId,
                    orderBy: 1
                })
                .then((res) => {
                    if (res.data.code === 1) {
                        this.planlist = res.data.object;
                        let time = this.planlist.slice(-1)[0].endTime;
                        this.finTime = time;
                        this.workTime = time.slice(10, 19);
                        this.myFunction();
                    }
                })
                .catch(() => {});
        },
        getqueryCollectSpeedInfotwo() {
            /**
             * 检测人数排名
             */
            this.$axios
                .post(api.queryCollectSpeedInfo, {
                    taskId: this.taskId,
                    orderBy: 2
                })
                .then((res) => {
                    if (res.data.code === 1) {
                        this.speedlist = res.data.object;
                    }
                })
                .catch(() => {});
        },
        getqueryCollectTitleInfo() {
            /**
             * 监控大屏--title
             */
            let data;
            if (
                this.oldCollectNum === null &&
                this.oldRemainNum === null &&
                this.oldCollectSpeed === null &&
                this.oldFreeChannelNum === null
            ) {
                data = {
                    taskId: this.taskId
                };
            } else {
                data = {
                    taskId: this.taskId,
                    oldCollectNum: this.oldCollectNum,
                    oldRemainNum: this.oldRemainNum,
                    oldCollectSpeed: this.oldCollectSpeed,
                    oldFreeChannelNum: this.oldFreeChannelNum
                };
            }
            this.$axios
                .post(api.queryCollectTitleInfo, data)
                .then((res) => {
                    if (res.data.code === 1) {
                        this.realist = res.data.object.list;
                        this.details = res.data.object.task;
                        // 获取获取一分钟变化
                        this.oldCollectNum = this.details.collectNum;
                        this.oldRemainNum = this.details.remainNum;
                        this.oldCollectSpeed = this.details.collectSpeed;
                        this.oldFreeChannelNum = this.details.freeChannelNum;
                        // 获取获取一分钟变化赋值
                        this.changeCollectNum = this.details.changeCollectNum;
                        this.changeCollectSpeed =
                            this.details.changeCollectSpeed;
                        this.changeFreeChannelNum =
                            this.details.changeFreeChannelNum;
                        this.changeRemainNum = this.details.changeRemainNum;
                        console.log('task返回值', this.details);
                        document.title = this.details.taskName;
                        if (this.details.status === 4) {
                            this.win_status = true;
                            this.clear();
                        }
                    }
                })
                .catch(() => {});
        },
        myFunction() {
            /**
             * 倒计时
             */
            let endTime = this.finTime;
            var nowDate = new Date();
            var EndDate = new Date(endTime);
            var dateDiff = EndDate.getTime() - nowDate.getTime();
            var days = Math.floor(dateDiff / (24 * 3600 * 1000));
            var leave1 = dateDiff % (24 * 3600 * 1000);
            var hours = Math.floor(leave1 / (3600 * 1000));
            var leave2 = leave1 % (3600 * 1000);
            var minutes = Math.floor(leave2 / (60 * 1000));
            var leave3 = leave2 % (60 * 1000);
            var seconds = Math.round(leave3 / 1000);
            days = this.checkTime(days);
            hours = this.checkTime(hours);
            minutes = this.checkTime(minutes);
            seconds = this.checkTime(seconds);
            if (getBeforeDate(0) <= this.finTime) {
                this.remainingtime =
                    '剩余 : ' +
                    hours +
                    '小时' +
                    minutes +
                    '分钟' +
                    seconds +
                    '秒';
            } else {
                this.remainingtime =
                    '剩余 : ' +
                    ' -- ' +
                    '小时' +
                    ' -- ' +
                    '分钟' +
                    ' -- ' +
                    '秒';
                this.finclear();
            }
        },
        checkTime(i) {
            if (i < 10 && i !== 0) {
                i = '0' + i;
            }
            return i;
        }
    }
};
</script>
<style lang="less" scoped>
.allscreen {
    position: absolute;
    left: 0;
}
.big {
    position: relative;
    top: 30px;
}
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    .ivu-modal {
        top: 0;
    }
}
.fullscreen {
    width: 100%;
    height: 100%;
    background-image: url('./../../../assets/images/nucle_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow-y: hidden;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    left: 0;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='nucle_bg.png',sizingMethod='scale');
    .title {
        width: 98%;
        height: 52px;
        text-align: center;
        line-height: 30px;
        margin: 20px 0 0 1%;
        background-image: url('./../../../assets/images/nucle_title.png');
        background-size: 100% 27px;
        background-repeat: no-repeat;
        .text {
            position: relative;
            top: -60px;
            font-size: 0.95rem;
            left: 41%;
            color: #fff;
        }
        .btn {
            width: 25px;
            height: 25px;
            position: relative;
            top: -62px;
            left: 42%;
            cursor: pointer;
            color: #fff;
        }
        p {
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            margin-left: 17px;
            background: linear-gradient(0deg, #b5b5b5 0%, #ffffff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
    .content {
        width: 100%;
        display: flex;
        .box_one {
            p {
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                font-size: 20px;
                margin: 0 0 20px 0;
                img:nth-child(1) {
                    width: 47px;
                    height: 35px;
                    margin: 0 5px 0 0;
                }
                img:nth-child(2) {
                    width: 168px;
                    height: 7px;
                    margin: 0 5px 0 0;
                }
            }
            .interval {
                width: 360px;
                height: 237px;
                background-color: rgba(11, 31, 72, 0.58);
                border-radius: 14px;
            }
        }
        .box_two {
            p {
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                font-size: 20px;
                margin: 15px 0 15px 0;
                img:nth-child(1) {
                    width: 47px;
                    height: 35px;
                    margin: 0 5px 0 0;
                }
                img:nth-child(2) {
                    width: 168px;
                    height: 7px;
                    margin: 0 5px 0 0;
                }
            }
            .interval {
                width: 388px;
                height: 228px;
                background-color: rgba(11, 31, 72, 0.58);
                border-radius: 14px;
                .timeline {
                    width: 100px;
                    height: 30px;
                    display: flex;
                    position: relative;
                    left: 70%;
                    z-index: 9999;
                    text-align: right;
                    margin: 0 0 -20px 0;
                    p {
                        width: 50px;
                        cursor: pointer;
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #feffff;
                        line-height: 20px;
                    }
                    .active {
                        width: 50px;
                        font-size: 14px;
                        text-align: right;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #00ccff;
                    }
                    .border-btm {
                        width: 19px;
                        height: 4px;
                        background: #00ccff;
                        position: absolute;
                        border-radius: 2px;
                        top: 40px;
                    }
                    .l-btm {
                        left: calc(42% - 22px);
                    }
                    .c-btm {
                        left: calc(85% - 12px);
                    }
                }
            }
        }
        .box_three {
            p {
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                font-size: 20px;
                margin: 15px 0 15px 0;
                img:nth-child(1) {
                    width: 47px;
                    height: 35px;
                    margin: 0 5px 0 0;
                }
                img:nth-child(2) {
                    width: 168px;
                    height: 7px;
                    margin: 0 5px 0 0;
                }
            }
            .interval {
                width: 24rem;
                height: auto;
                filter: Alpha(opacity=58);
                border-radius: 14px;
            }
        }
        .cont_left {
            width: 20%;
            height: 80%;
            margin: 0 0 0 1.5%;
        }
        .cont_center {
            width: 59%;
            height: 80%;
            margin: 0 1%;
            .number {
                width: 100%;
                display: flex;
                margin: 1.5% 0 0 0;
                li {
                    width: 198px;
                    height: 119px;
                    color: #fff;
                    font-size: 14px;
                    margin: 0 2% 0 0;
                    text-align: center;
                    background-image: url('./../../../assets/images/nucle_blue.png');
                    background-size: 100% 119px;
                    background-repeat: no-repeat;
                    p {
                        font-size: 32px;
                        font-family: DIN;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 32px;
                        background: linear-gradient(
                            0deg,
                            #00a8ff 0%,
                            #8fdffe 100%
                        );
                        -webkit-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        margin: 10px 0 0 0;
                        small {
                            font-size: 12px;
                        }
                    }
                    span {
                        font-size: 0.6rem;
                        font-weight: 500;
                        font-family: PingFang SC;
                    }
                    .time {
                        margin: 10px 0 0 0;
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ff5353;
                        line-height: 32px;
                    }
                    .dynamic {
                        width: 100%;
                        margin: 10px 0 0 0;
                        text-align: left;
                        .scolor {
                            color: #53ff90;
                        }
                        span:nth-child(1) {
                            font-size: 16px;
                            font-family: DIN;
                            font-weight: bold;
                            line-height: 28px;
                            margin: 0 0 0 26px;
                            display: inline-block;
                            img {
                                width: 9px;
                                height: 13px;
                                position: relative;
                                top: -2px;
                            }
                        }
                        span:nth-child(2) {
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #ffffff;
                            line-height: 32px;
                            opacity: 0.6;
                            position: relative;
                            right: -30%;
                        }
                    }
                }
                li:nth-child(5) {
                    width: 19%;
                    height: 120px;
                    color: #fff;
                    font-size: 14px;
                    margin: 0 1% 0 0;
                    text-align: center;
                    background-image: url('./../../../assets/images/nucle_red.png');
                    background-size: 100% 120px;
                    background-repeat: no-repeat;
                    p {
                        font-size: 32px;
                        font-family: DIN;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 32px;
                        background: linear-gradient(
                            0deg,
                            #ff1b1b 2.05078125%,
                            #ff8989 100%
                        );
                        -webkit-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                    span {
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                    }
                }
            }
            .rotation {
                width: 99%;
                height: 150px;
                background-color: rgba(11, 31, 72, 0.58);
                border-radius: 14px;
                margin: 30px 0;
            }
            .map {
                width: 60rem;
                height: auto;
                color: #fff;
                border-radius: 5px;
                margin: 10px 0 23px 1.5%;
            }
        }
        .cont_right {
            width: 20%;
            height: 80%;
            margin: 0 1% 0 0;
        }
    }
}
</style>
